<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common :: header"/>
<body>
<div class="page">
    <div class="card">
        <div class="card-header">
            <form id="search_form">
                <input class="easyui-textbox" data-options="label:'帐号'" name="loginName" style="width:180px;">
                <input class="easyui-textbox" data-options="label:'IP'" name="ipaddr" style="width:160px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="dm.resetForm('search_form');">重置</a>
                <a href="#" class="easyui-linkbutton button-info" data-options="iconCls:'icon-search'" onclick="dm.search('table', 'search_form')">查询</a>
            </form>
        </div>
        <div class="card-body">
            <div id="table"></div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var forceFlag = [[${@permission.hasPermi('monitor:online:forceLogout')}]];

    $(function() {
        $('#table').datagrid({
            url: '/monitor/online/list',
            fit: true,
            fitColumns: true,
            nowrap: true,
            pagination: true,
            pageSize: 20, // 每一页多少条数据
            pageList: [ 10, 20, 30, 40, 50 ], // 可以选择的每页的大小的combobox
            idField: 'sessionId',
            sortName: 'sessionId',
            toolbar: '#toolbar',
            columns:[ [
                {field: 'ck', checkbox: true },
                {field: 'loginName', title: '帐号', align:'center',width: 80},
                {field: 'deptName', title: '部门名称', align:'center',width: 80},
                {field: 'ipaddr', title: 'IP地址', align:'center',width: 100},
                {field: 'loginLocation', title: '位置', align:'center',width: 60},
                {field: 'browser', title: '浏览器', align:'center',width: 60},
                /*{field: 'os', title: '操作系统', align:'center',width: 100},
                {field: 'status', title: '会话状态', align:'center',width: 60, formatter:function (value) {
                    if (value == 'on_line' ) return '<span class="layui-badge layui-bg-blue">在线</span>';
                    if (value == 'off_line' ) return '<span class="layui-badge">离线</span>';
                }},*/
                {field: 'startTimestamp',title: '登录时间',align:'center',sortable: true, width: 140,formatter: timeFormatter},
                {field: 'lastAccessTime',title: '最后访问时间',align:'center',sortable: true, width: 140,formatter: timeFormatter},
                {field: 'sessionId',title: '操作',align:'center',width: 50,formatter: function (value) {
                        return '<button class="layui-btn layui-btn-xs ' + forceFlag + '" onclick="forceLogout(\'' + value + '\')">强退</button>'
                    }
                }
            ] ]
        });
    });

    function forceLogout(sessionId) {
        dm.confirm('您确定要强行退出该用户吗？', function () {
            dm.post('/monitor/online/forceLogout', {sessionId:sessionId}, function () {
                dm.search('table');
            })
        })
    }

</script>
</body>
</html>
